<template>
  <div class="select">
    <back title="选择器"></back>
    <btn style="width:90%;display:block;margin:20px auto;" @click.native="$select(cityProps)">选择城市</btn>
    <btn style="width:90%;display:block;margin:20px auto;" @click.native="$select(yearProps)">选择年份</btn>
    <btn style="width:90%;display:block;margin:20px auto;" @click.native="$select(contractProps)">查看合同</btn>
    <div style="margin-left:10%">
      城市：<input type="text" v-model="cityProps.value" style="padding:4px 8px">
    </div>
    <div style="margin:10px 0 0 10%">
      年份：<input type="text" v-model="yearProps.value" style="padding:4px 8px">
    </div>
    <!-- 选择组件 -->
    <!-- <list-select :props="props" @getValue="getValue" @hide="props.show=!props.show" /> -->

    <foot :active="3" />
  </div>
</template>

<script>
// import ListSelect from '@/components/ListSelect'

export default {
  name: 'Select',
  data () {
    return{
      // props:{},
      cityProps:{
        show:false,
        index:0,
        list:[],
        value:'合肥'
      },
      yearProps:{
        show:false,
        index:0,
        list:[],
        value:'2010年'
      },
      contractProps:{
        show:false,
        index:0,
        list:[]
      }
    }
  },
  components:{
    // ListSelect
  },
  methods:{
    /*toSelect(props){
      props.show=true
      props.list.forEach((v,i)=>{
        if(props.value==v)props.index=i
      })
      this.props=props
    },
    getValue(v){
      this.props.show=false
      if(this.props.value==undefined){
        location.href=this.props.list[this.props.index].link
      }else{
        this.props.value=v
      }
    }*/
  },
  mounted(){
    this.cityProps.list=['深圳','广州','安庆','合肥','珠穆朗玛峰']
    this.yearProps.list=['2019年','2018年','2017年','2016年','2010年']
    this.contractProps.list=[
      {text:'贷款合同',link:'http://www.baidu.com'},
      {text:'借贷合同',link:'http://www.baidu.com'},
      {text:'借据',link:'http://www.baidu.com'},
      {text:'客户推荐协议',link:'http://www.baidu.com'},
    ]
  }
}
</script>

<style lang="less" scoped>

</style>